import {addUnit, createNamespace, isDef} from '../utils';

var _createNamespace = createNamespace('progress'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    props: {
        color: String,
        inactive: Boolean,
        pivotText: String,
        textColor: String,
        pivotColor: String,
        trackColor: String,
        strokeWidth: [String, Number],
        percentage: {
            type: Number,
            required: true,
            validator: function validator(value) {
                return value >= 0 && value <= 100;
            }
        },
        showPivot: {
            type: Boolean,
            default: true
        }
    },
    data: function data() {
        return {
            pivotWidth: 0,
            progressWidth: 0
        };
    },
    mounted: function mounted() {
        this.setWidth();
    },
    watch: {
        showPivot: 'setWidth',
        pivotText: 'setWidth'
    },
    methods: {
        setWidth: function setWidth() {
            var _this = this;

            this.$nextTick(function () {
                _this.progressWidth = _this.$el.offsetWidth;
                _this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
            });
        }
    },
    render: function render() {
        var h = arguments[0];
        var pivotText = this.pivotText,
            percentage = this.percentage;
        var text = isDef(pivotText) ? pivotText : percentage + '%';
        var showPivot = this.showPivot && text;
        var background = this.inactive ? '#cacaca' : this.color;
        var pivotStyle = {
            color: this.textColor,
            left: (this.progressWidth - this.pivotWidth) * percentage / 100 + "px",
            background: this.pivotColor || background
        };
        var portionStyle = {
            background: background,
            width: this.progressWidth * percentage / 100 + 'px'
        };
        var wrapperStyle = {
            background: this.trackColor,
            height: addUnit(this.strokeWidth)
        };
        return h("div", {
            "class": bem(),
            "style": wrapperStyle
        }, [h("span", {
            "class": bem('portion'),
            "style": portionStyle
        }, [showPivot && h("span", {
            "ref": "pivot",
            "style": pivotStyle,
            "class": bem('pivot')
        }, [text])])]);
    }
});